<template>
    <div>
          <a-form-model
                ref="ruleForm"
                :model="params"
                layout="inline"
                class="search-form"
            >
            <a-card>
            <a-form-model-item label="流程分类" prop="categoryId">
              <category-select v-model="params.categoryId"></category-select>
            </a-form-model-item>
              <a-form-model-item label="模型名称" prop="name">
                <a-input v-model="params.name" placeholder="模型名称" />
              </a-form-model-item>
              <a-form-model-item label="模型key" prop="key">
                <a-input v-model="params.key" placeholder="模型key" />
              </a-form-model-item>
              <a-form-model-item>
                <a-button type="primary" @click="handleSearch">
                  搜索
                </a-button>
                <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
                  重置
                </a-button>
              </a-form-model-item>
            </a-card>
          </a-form-model>
            <a-card>
            <div>
              <a-button type="primary" @click="() => onEdit()">
                新建
              </a-button>
            </div>
            <a-table
                 bordered
                :columns="columns"
                :row-key="record => record.id"
                :data-source="data"
                :pagination="pagination"
                :loading="loading"
                size="middle"
                @change="handleTableChange"
            >
              <template slot="operation" slot-scope="text , record">
                <a @click="() => onEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a-popconfirm
                    title="确定删除吗?"
                    @confirm="() => onDelete(record)"
                >
                  <a href="javascript:;">删除</a>
                </a-popconfirm>
                <a-divider type="vertical" />
                <a @click="() => onDeploy(record)">发布</a>
                <a-divider type="vertical" />
                <a @click="() => onEditor(record)">流程设计</a>
              </template>
            </a-table>
            </a-card>
      <a-modal
          :title="modalTitle"
          :visible="visible"
          :confirm-loading="confirmLoading"
          @ok="handleOk"
          @cancel="handleCancel"
      >
        <model-form ref="form" @done="onSubmitDone" />
      </a-modal>

      <a-modal
          title="发布流程模型"
          :visible="visibleDeploy"
          :confirm-loading="confirmLoading"
          @ok="handleDeployOk"
          @cancel="handleDeployCancel"
      >
        <a-form-model ref="deployForm" :model="deploy"  >
          <a-form-model-item label="模型名称" prop="name">
            <a-input v-model="deploy.name" disabled placeholder="请输入模型名称" />
          </a-form-model-item>
          <a-form-model-item label="模型key" prop="key">
            <a-input v-model="deploy.key" disabled placeholder="模型key" />
          </a-form-model-item>
          <a-form-model-item label="模型分类" prop="categoryId">
            <category-select v-model="deploy.categoryId"></category-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
</template>
<script>
import { statusMap, page, remove, deploy } from '@/api/model'
import ModelForm from './components/ModelForm'
import CategorySelect from '../category/components/CategorySelect'

export default {
  name: 'ProcessModel',
  components: {
    CategorySelect,
    ModelForm
  },
  data() {
    return {
      columns: [
        {
          title: '模型ID',
          dataIndex: 'id',
          ellipsis: true
        },
        {
          title: '模型key',
          dataIndex: 'key',
          ellipsis: true
        },
        {
          title: '模型名称',
          dataIndex: 'name',
          ellipsis: true
        },
        {
          title: '分类',
          dataIndex: 'categoryName',
          ellipsis: true
        },
        {
          title: '版本号',
          dataIndex: 'version',
          ellipsis: true
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true
        },
        {
          title: '最后更新时间',
          dataIndex: 'lastUpdateTime',
          ellipsis: true
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      loading: false,
      confirmLoading: false,
      modalTitle: '',
      visible: false,
      pagination: { showSizeChanger: true, showTotal: total => `共 ${total} 条数据` },
      params: {
        page: 1,
        limit: 10,
        name: '',
        key: '',
        category: ''
      },
      statusMap: statusMap,
      data: [],
      visibleDeploy: false,
      deploy: {
        id: '',
        name: '',
        key: '',
        categoryId: ''
      }
    }
  },
  created() {
    this.handleLoad()
  },
  methods: {
    handleSearch() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.params.page = 1
          this.handleLoad()
        }
        return false
      })
    },
    handleReset() {
      this.$refs.ruleForm.resetFields()
    },
    handleTableChange(pagination, filters, sorter) {
      this.params = {
        ...this.params,
        limit: pagination.pageSize,
        page: pagination.current
      }
      this.handleLoad()
    },
    handleLoad(params) {
      this.loading = true
      if (params) {
        this.params = { ...this.params, ...params }
      }
      this.pagination.current = this.params.page
      page(this.params).then(({ data }) => {
        const pagination = { ...this.pagination }
        this.data = data.records
        pagination.total = data.total
        this.pagination = pagination
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleOk(e) {
      this.confirmLoading = true
      this.$refs.form.onSubmit()
    },
    handleCancel(e) {
      this.$refs.form.resetForm()
      this.visible = false
    },
    onSubmitDone(success) {
      this.confirmLoading = false
      if (success) {
        this.handleCancel()
        this.handleLoad({ page: 1 })
      }
    },
    onDelete(row) {
      remove({ id: row.id }).then(res => {
        res.success ? this.$message.success('删除成功') : this.$message.error('删除失败')
        this.handleLoad({ page: 1 })
      })
    },
    onDeploy(row) {
      this.deploy.id = row.id
      this.deploy.name = row.name
      this.deploy.key = row.key
      this.deploy.categoryId = row.category
      this.visibleDeploy = true
    },
    handleDeployOk(e) {
      this.confirmLoading = true
      deploy(this.deploy).then(res => {
        res.success ? this.$message.success('发布成功') : this.$message.error('发布失败')
        if (res.success) {
          this.handleDeployCancel()
          this.handleLoad({ page: 1 })
        }
      })
    },
    handleDeployCancel(e) {
      this.confirmLoading = false
      this.visibleDeploy = false
    },
    onEdit(row) {
      this.modalTitle = row ? '编辑' : '新增'
      this.visible = true
      setTimeout(() => {
        this.$refs.form.loadData(row)
      }, 50)
    },
    onEditor(row) {
      const r = this.$router.resolve({ path: '/model/editor', query: { id: row.id }})
      window.open(r.href, '_blank')
    },
    onSelectChange(id) {
      this.params.category = id
      this.handleLoad()
    }
  }
}
</script>
